<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
	String contextPath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<jsp:include page="/pages/common/header.jsp"></jsp:include>
<title>任务检索页面</title>
<%-- js --%>
<script type="text/javascript">
	
	
	var tq_qp={};
	//加载
	tq_qp.loaded=function(){
		var f=$("#tq-qp-form");
		$("#tq-qp-queryBtn",f).click(function(){
			tq_qp.query(0,20);
		});
		$("#flightDate",f).val(ts_common.date.getymdStr(new Date()));
		$("#tq-qp-moreQueryBtn").click(function(){
			if($(this)[0].queryData){
				var url="<%=contextPath%>/task/TaskQuery.koala?method=queryByResultId";
				var d=$(this)[0].queryData;
				tq_qp.post(url,d);
			}
		});
		
	}
	
	
	tq_qp.query=function(pageIndex,pageLen){
		var f=$("#tq-qp-form");
		var from=$("#from",f);
		var to=$("#to",f);
		var fd=$("#flightDate",f);
		var rd=$("#returnDate",f);
		ts_common.trim.trimEVal(from,to.fd,rd);
		if(!ts_common.validate.falseFocus(from,
				ts_common.validate.cityCode(from.val())
				,"出发城市三字码不正确！")){
			return;
		}
		if(!ts_common.validate.falseFocus(to,
				ts_common.validate.cityCode(to.val())
				,"到达城市三字码不正确！")){
			return;
		}
		if(!ts_common.validate.falseFocus(fd,
				ts_common.validate.stringEmpty(fd.val()) || ts_common.validate.flightDate(fd.val(),true)
				,"起飞日期不正确")){
			return;
		}
		if(!ts_common.validate.falseFocus(rd,
				ts_common.validate.stringEmpty(rd.val()) || ts_common.validate.flightDate(rd.val(),true)
				,"返程日期不正确")){
			return;
		}
		var data=$(f).serialize();
		data += "&pageIndex=" + pageIndex;
		data += "&pageLen=" + pageLen;
		var url="<%=contextPath%>/task/TaskQuery/query.koala?";
		tq_qp.renderTableBody($("#tq-qp-resultTable"),null,0,true);
		tq_qp.post(url,data);
	}
	
	tq_qp.post=function(url,data){
		var f = $("#tq-qp-form");
		$.ajax({
			async : true,
			cache : false,
			data : data,
			dataType : "json",
			type : "POST",
			url : url,
			beforeSend : function() {
				$("#tq-qp-queryBtn").button('loading');
				$("#tq-qp-moreQueryBtn").button("loading");
				$("#tq-qp-progressDiv").show();
			},
			success : function(d) {
				$("#tq-qp-resultContextDiv").show();
				tq_qp.renderTableBody($("#tq-qp-resultTable"),d.data,d.start);
				tq_qp.renderMoreBtn($("#tq-qp-moreQueryBtn"),d.resultId,d.start,d.pageSize,d.resultCount);
			},
			error : function(e) {
				alert("错误" + e);
			},
			complete : function() {
				$("#tq-qp-queryBtn").button('reset');
				$("#tq-qp-progressDiv").hide();
			}
		});
	}
	
	
	
	tq_qp.loadTask=function(btn,id){
		if($(btn).attr("loaded")=='1'){
			$("#"+id).toggle();
			return;
		}
		
		$("#"+id).remove();
		var tr=$(btn).closest("tr");
		$(tr).after("<tr id='"+id+"'><td colspan='9'></td></tr>");
		$.ajax({
			async : true,
			cache : false,
			data : {taskId:id},
			dataType : "json",
			type : "POST",
			url : ts_common.url.loadTaskUrl("<%=contextPath%>"),
			beforeSend : function() {
				$(btn).button("loading");
				var td=$("td",$("#"+id)).first();
				$(td).html("<div class='progress progress-striped active' style='width:200px;' >"+
					"<div class='progress-bar' role='progressbar' aria-valuenow='45'"+
					"aria-valuemin='0' aria-valuemax='100' style='width:100%'>"+
				"</div></div>");
			},
			success : function(d) {
				var td=$("td",$("#"+id)).first();
				if(!d){
					$(td).html("加载失败，请重新尝试");
				}else{
					$(td).html("<button onclick=tq_qp.loadAgain(this,'"+id+"')>重新加载</button>"+tq_qp.getMoreInfoTemplate(d.taskModel));
					$(btn).attr("loaded",1);
				}
				
			},
			error : function(e) {
				alert("错误" + e);
			},
			complete : function() {
				$(btn).button("reset");
			}
		});
	}
	
	tq_qp.loadAgain=function(btn,id){
		var tr=$(btn).closest("tr").prev();
		var mBtn=$("button",tr);
		$(mBtn).attr("loaded",0);
		tq_qp.loadTask(mBtn,id);
	}
	
	
	
	tq_qp.renderTableBody=function(e,data,offset,remove){
		if(remove){
			$("tbody",e).remove();
		}
		if(!$("tbody",e)[0]){
			$(e).append("<tbody></tbody>");
		}
		if(!data || data.lenght==0){return;}
		for(var i=0;i<data.length;i++){
			var m=data[i].taskModel;
			$("tbody",e).append(
			  "<tr>"+
			  "<td>"+(offset+i+1)+"</td>"+
			  "<td>"+(m.channel.name)+"</td>"+
			  "<td>"+(m.fromCity+"-"+m.toCity)+"</td>"+
			  "<td>"+(m.flightDate)+"</td>"+
			  "<td>"+(m.returnGrabDate==null?"":m.returnGrabDate)+"</td>"+
			  "<td>"+(m.priority)+"</td>"+
			  "<td>"+(m.status)+"</td>"+
			  "<td>"+(m.crawlCount)+"</td>"+
			  "<td><button type='button' class='btn btn-xs btn-primary' data-loading-text='正在加载'"+ 
			 	 "autocomplete='off' onclick=tq_qp.loadTask(this,'"+m.id+"') >查询详情</button></td>"+
			  "</tr>"
			);
		};
	}
	
	tq_qp.renderMoreBtn=function(btn,resultId,pageIndex,pageLen,sum){
		if(!resultId || pageIndex+pageLen>=sum){
			$(btn).html("全部结果加载完毕 共[ "+sum+" ]条结果");
			$(btn)[0].queryData=null;
		}else{
			$(btn).button("reset");
			$(btn).html("点击获取更多数据 剩余[ "+(sum-pageIndex-pageLen)+" ]条结果");
			$(btn)[0].queryData={
				resultId:resultId,
				offset:pageIndex+pageLen,
				count:pageLen
			};
		}
	}
	
	
	
	tq_qp.getMoreInfoTemplate=function(data,id){
		var html="";
		if(!data){
			html="暂无详情";
		}else{
			
			html+="<table class='detailTable'>";
			//html="<div class='alert alert-info' ><p class='text-left'>任务抓取次数:</p><p>123456</p></div>";
			/* html+=getInfoP("任务id",data.id);
			html+=getInfoP("任务出发到达城市",data.fromCityName+"-"+data.toCityName);
			html+=getInfoP("任务抓取渠道",data.grabChannel);
			html+=getInfoP("任务镜像文件key",data.sourceRowkey);
			html+=getInfoP("任务抓取次数",data.grabTimes);
			html+=getInfoP("任务投放次数",data.taskCompensateCount);
			html+=getInfoP("任务抓取航班数量",data.crawlCount);
			html+=getInfoP("任务流量",data.byteLength);
			html+=getInfoP("执行线程名称",data.recordName);
			html+=getInfoP("任务使用IP",data.proxyIp);
			html+=getInfoP("任务抓取日记",data.remarks); */
			
			html+=tq_qp.getInfoT("任务id",data.id);
			html+=tq_qp.getInfoT("任务出发到达城市",data.fromCityName+"-"+data.toCityName);
			html+=tq_qp.getInfoT("任务抓取渠道",data.channel.name);
			html+=tq_qp.getInfoT("任务镜像文件key",data.sourceRowkey);
			html+=tq_qp.getInfoT("任务投放次数",data.excuteCount);
			/* html+=getInfoT("任务抓取数量",data.crawlCount); */
			html+=("<tr><th>任务抓取数量</th><td>"+(data.crawlCount==0?"<label style='color:red;'>暂无</label>":data.crawlCount)+"</td></tr>");
			
			if(data.actions){
				data.actions.sort(function(a,b){
					return a.timestamp>b.timestamp;
				});
				for(var i=0;i<data.actions.length;i++){
					var a=data.actions[i];
					html+=tq_qp.getInfoT2("执行时间",a.timestampStr,"执行动作",a.remark);
				}
			}
			html+="</table>";
		}
		return html;
	}
	
	tq_qp.getInfoT=function(attr,value){
		return "<tr><th>"+attr+"</th><td>"+value+"</td></tr>";
	}
	tq_qp.getInfoT2=function(attr1,value1,attr2,value2){
		return "<tr><th>"+attr1+"</th><td>"+value1+"</td><th>"+attr2+"</th><td>"+value2+"</td></tr>";
	}
	
	
	$(function() {
		tq_qp.loaded();
	});
</script>
<%-- css --%>
<style type="text/css">
.baseBlank {
	height: 10px;
}
</style>
</head>
<body>
	<div class="panel panel-default">
		<div class="panel-heading">任务检索</div>
		<div class="panel-body">
			<%-- 页面冲突了，命名还是艺术点吧，以为我想啊？ --%>
			<form id="tq-qp-form">
				<%-- 默认航空运价领域 --%>
				<input type="hidden" name="taskType" value="1">

				<div class="form-inline" role="form">
					<div class="form-group">
						<label for="" class="">出发城市</label> <input type="text"
							class="form-control" name="from" id="from" value="PEK"/>
					</div>
					<div class="form-group">
						<label for="" class="">到达城市</label> <input type="text"
							class="form-control" name="to" id="to" value="CAN"/>
					</div>
				</div>
				<div class="baseBlank"></div>
				<div class="form-inline" role="form">
					<div class="form-group">
						<label for="" class="">起飞时间</label> <input type="text"
							class="form-control" name="flightDate" id="flightDate" />
					</div>
					<div class="form-group">
						<label for="" class="">返程时间</label> <input type="text"
							class="form-control" name="returnDate" id="returnDate" />
					</div>
				</div>
				<div class="baseBlank"></div>
				<div class="form-inline" role="form">
					<div class="form-group">
						<label for="" class="">任务状态</label> <select class="form-control" name="taskStatus">
							<option value="">全部</option>
							<option value="0">等待中</option>
							<option value="2">执行中</option>
							<option value="3">成功</option>
							<option value="-2">抓取失败</option>
							<option value="-3">解析失败</option>
							<option value="-4">其他失败</option>
							<option value="-5">任务暂停</option>
							<option value="-10">状态不明</option>
						</select>
					</div>
				</div>
				<div class="baseBlank"></div>
				<div class="form-inline" role="form">
					<div class="form-group">
						<label for="" class="">所属渠道</label> <select class="form-control" name="channelId">
							<option value="">全部</option>
							<c:forEach var="c" items="${channels}" varStatus="status">
								<option value="${c.channelModel.id }">${c.channelModel.name}</option>
							</c:forEach>
						</select>
					</div>
					<div class="form-group">
						<button type="button" class="btn btn-default"
							style="margin-left: 20px;" data-loading-text="正在查询"
							autocomplete="off" id="tq-qp-queryBtn">立刻查询</button>
					</div>
				</div>
			</form>


			<div class="baseBlank"></div><div class="baseBlank"></div>
			<div class="progress progress-striped active" style="width:600px; display:none" id="tq-qp-progressDiv" >
				<div class="progress-bar" role="progressbar" aria-valuenow="45"
					aria-valuemin="0" aria-valuemax="100" style="width:100%">
				</div>
			</div>

			<div class="baseBlank"></div><div class="baseBlank"></div>
			<div id="tq-qp-resultContextDiv" style="width:100%;display:none">
				<table class="table table-bordered table-hover table-striped table-condensed" id="tq-qp-resultTable" style="">
					<thead>
						<tr class="info">
							<th>序号</th>
							<th>渠道</th>
							<th>航段</th>
							<th>起飞时间</th>
							<th>回程时间</th>
							<th>任务优先级</th>
							<th>任务当前状态</th>
							<th>抓取数量</th>
							<th>任务详情</th>
						</tr>
					</thead>
				</table>
				<button type="button" class="btn" style="width:100%;margin:0px;" 
					autocomplete="off" 
				id="tq-qp-moreQueryBtn" data-loading-text="数据加载中">点击获取更多数据</button>
			</div>
		</div>
		<div class="panel-footer">模板脚</div>
	</div>
</body>
</html>